<template>
  <el-container class="articles-container">
    <el-header>
      <h1>文章列表</h1>
    </el-header>

    <el-main>
      <div v-if="loading" class="loading">
        <el-skeleton :rows="6" animated />
      </div>
      <div v-else-if="error" class="error">
        {{ error }}
      </div>
      <div v-else class="article-list">
        <el-row :gutter="20">
          <el-col
            v-for="article in articleStore.articles"
            :key="article.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <el-card class="article-card" shadow="hover">
              <div class="article-content">
                <h3 class="article-title">
                  <RouterLink :to="`/article/${article.id}`">{{ article.title }}</RouterLink>
                </h3>
                <p>分类: {{ categoriesMap[article.categoryId] || '未知分类' }}</p>
                <p> {{ article.createdAt }}</p>
                <div v-if="authStore.isLoggedIn" class="actions">
                  <RouterLink :to="`/article/edit/${article.id}`">编辑</RouterLink>
                  <el-button @click="handleDeleteAndRefresh(article.id)" link type="danger">删除</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <div class="pagination">
          <el-pagination
            v-model:current-page="articleStore.page"
            :page-size="articleStore.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="articleStore.total"
            @size-change="handleSizeChange"
            @current-change="fetchAndProcessData"
          />
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { RouterLink } from 'vue-router';
import { ref, onMounted, defineProps, computed, watch } from 'vue';
import { useAuthStore } from '../stores/authStore';
import { useArticleStore } from '../stores/useArticleStore ';
import { useCategories } from '../composables/useCategory';
import { useArticleList } from '../composables/useArticleList';
import { useDeleteArticle } from '../composables/useDeleteArticle';

const authStore = useAuthStore();
const articleStore = useArticleStore();

// 使用组合函数
const { categoriesMap, fetchCategories } = useCategories();
const { loading, error, fetchArticleList } = useArticleList();
const { deleteArticle } = useDeleteArticle();

// 获取文章列表
const fetchAndProcessData = async () => {
  const {articles, total, totalPages} = await fetchArticleList({
    page: articleStore.page,
    limit: articleStore.limit
  });
  if (articles) {
    articleStore.setArticles(articles);
    articleStore.setTotal(total);
    articleStore.setTotalPages(totalPages);
  }
};

const handleSizeChange = async (newLimit) => {
  articleStore.setLimit(newLimit)
  const {articles, total, totalPages} = await fetchArticleList({
    page: articleStore.page,
    limit: articleStore.limit
  });
  if (articles) {
    articleStore.setArticles(articles);
    articleStore.setTotal(total);
    articleStore.setTotalPages(totalPages);
  }
}

const handleDeleteAndRefresh = async (id) => {
  await deleteArticle(id);      // 先执行删除
  await fetchAndProcessData(); // 再刷新数据
};

onMounted(async () => {
  await fetchCategories();
  await fetchAndProcessData();
});
</script>
<style scoped>
.articles-container {
  max-width: 1200px;
  margin: 0 auto;
}

.article-list {
  padding: 20px 0;
}

.article-card {
  margin-bottom: 20px;
}

.article-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.article-title {
  font-size: 18px;
  margin: 0;
  line-height: 1.5;
}

.actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.loading,
.error {
  text-align: center;
  padding: 20px;
}
</style>